import React from 'react'
import { connect } from 'dva'
import { mapStateToProps } from 'utils/view_utils'
import styles from './userAddStyle.less'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import PopUpSelect from 'widget/PopUpSelectnoModal/PopUpSelect'
import { isEmpty, cloneDeep, } from 'lodash'
import cx from 'classnames'
import locale from 'antd/lib/date-picker/locale/zh_CN';
import { Form, Select,Input, Row, Col, Button, DatePicker } from 'antd';
// import { message,DatePicker} from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Option } = Select
const routeView = function ({ dispatch, model, form }) {
    const { modelObj, namespace } = model
    const { resetFields, getFieldDecorator, validateFields, setFieldsValue, validateFieldsAndScroll } = form
    let { sellerList, requestUrl, areaList, selectItem, roleList, role, query, detail, addressList } = modelObj
    //console.log('selectItem',selectItem)
    // PopUpSelect 需要row配置
    const sellerTableColumn = [
        {
            title: '项目名称', width: 100, dataIndex: 'name', key: 'productId', render: (e, item) => {
                return item.name
            }
        },
        {
            title: '所属城市', width: 200, dataIndex: 'cityName', key: 'cityName', render: (a, item, index, d, e, f) => {
                //console.log(item)
                let arr = ['北京市', '重庆', '上海', '天津']
                if (arr.indexOf(item.provinceName) > -1) {
                    return `${item.cityName}${item.provinceName && item.cityName && item.countyName && ' - ' || ''}${item.countyName || ''}`
                } else {
                    return `${item.provinceName || ''}${item.provinceName && item.cityName && ' - ' || ''}${item.cityName || ''}${item.provinceName && item.cityName && item.countyName && ' - ' || ''}${item.countyName || ''}`
                }


            }
        },
        {
            dataIndex: "shelfStatus",
            title: "状态",
            width: 80,
            render: (a, item, index, d, e, f) => {
                let shelfStatus = ["未上架", "已上架", "已下架"]
                return (
                    <span>{shelfStatus[item.shelfStatus]}</span>
                )
            }
        },
    ];
    let sellerQueryList = [
        { name: '区域公司', type: 'select', key: 'regionId', list: addressList, notNeedAll: true },
        { name: '省市', type: 'cascader', list: cloneDeep(areaList), key: ['province', 'city', 'county'], value: '' },
        { name: '项目名称', type: 'text', key: 'name', value: '' },
    ];
    const sellerSelectedColumn = [
        {
            title: '项目名称', width: 110, dataIndex: 'name', key: 'productId', render: (e, item) => {
                return item.name
            }
        },
        {
            title: '所属城市', dataIndex: 'cityName', key: 'cityName', render: (a, item, index, d, e, f) => {
                //console.log(item)
                let arr = ['北京市', '重庆', '上海', '天津']
                if (arr.indexOf(item.provinceName) > -1) {
                    return `${item.cityName}${item.provinceName && item.cityName && item.countyName && ' - ' || ''}${item.countyName || ''}`
                } else {
                    return `${item.provinceName || ''}${item.provinceName && item.cityName && ' - ' || ''}${item.cityName || ''}${item.provinceName && item.cityName && item.countyName && ' - ' || ''}${item.countyName || ''}`
                }

            }
        },
        {
            dataIndex: "shelfStatus",
            title: "状态",
            width: 80,
            render: (a, item, index, d, e, f) => {
                let shelfStatus = ["未上架", "已上架", "已下架"]
                return (
                    <span>{shelfStatus[item.shelfStatus]}</span>
                )
            }
        },
    ];
    const formItemLayout = {
        labelCol: {
            span: 1,

        },
        wrapperCol: {
            span: 16
        },
    }
    const formItemLayout1 = {
        labelCol: {
            span: 2,
            offset: 0
        },
        wrapperCol: {
            span: 22,
            offset: 0
        },
    }
    const formItemLayout2 = {
        labelCol: {
            span: 3,
            offset: 0
        },
        wrapperCol: {
            span: 21,
            offset: 0
        },
    }
    //选择角色

    function handleChange(value) {
        let permissionRoleIds = []
        value.map((item) => {
            permissionRoleIds.push(item)
        })
        query.permissionRoleIds = Array.from(new Set(permissionRoleIds))
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { query }
        })
    }
    //date改变时
    function dateChange(date, dateString) {
        query['startTime'] = dateString[0]
        query['endTime'] = dateString[1]
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { query }
        });
    }
    function updateModel(value, key, obj){
        detail[key] = value
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { detail }
        })
    }
    return (
        <div className={cx('public_listMain')}>
            <div className="functionButton">
                <Button type='primary' loading={modelObj.btnLoading} onClick={() => {
                    dispatch({
                        type: `${namespace}/save`,
                        payload: {}
                    })

                }} >保存</Button>
            </div>
            <CollapsiblePanels title="新增用户信息" hideUpDownBtn={true}  >
                <Form autoComplete="off" className="auto-wrap" >

                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="用户账号" labelCol={{ span: 5 }}>
                                <div>
                                <Input autoComplete={'off'} onChange={(e) => { updateModel(e.target.value, 'username', 'detail') }} />
                                </div>
                            </FormItem>
                        </Col>
                        {/* <Col span={12}>
                            <FormItem {...formItemLayout} label="身份证号码" labelCol={{ span: 6 }}>
                                <div className={cx('select-item-contain')}>
                                    {createConsultantParams.idCardNo ? createConsultantParams.idCardNo : null}
                                </div>
                            </FormItem>
                        </Col> */}
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="姓名" labelCol={{ span: 5 }}>
                                <div>
                                <Input autoComplete={'off'} onChange={(e) => { updateModel(e.target.value, 'name', 'detail') }} />
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="手机号码" labelCol={{ span: 5 }} >
                                <div className={cx('select-item-contain')}>
                                <Input autoComplete={'off'} onChange={(e) => { updateModel(e.target.value, 'mobile', 'detail') }} />
                                </div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="密码" labelCol={{ span: 5}} >
                                <div className={cx('select-item-contain')}>
                                <Input type='password' autoComplete={'off'} onChange={(e) => { updateModel(e.target.value, 'password', 'detail') }} />
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="所属部门" labelCol={{ span: 5 }} >
                                <div className={cx('select-item-contain')}>
                                <Input autoComplete={'off'} onChange={(e) => { updateModel(e.target.value, 'dept', 'detail') }} />
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="岗位" labelCol={{ span: 5 }}>
                                <div className={cx('select-item-contain')}>
                                <Input autoComplete={'off'} onChange={(e) => { updateModel(e.target.value, 'job', 'detail') }} />
                                </div>
                            </FormItem>
                        </Col>

                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={12}>
                            <FormItem
                                {...formItemLayout}
                                label="角色" labelCol={{ span: 3 }}
                            > {getFieldDecorator('role', {
                                initialValue: query.permissionRoleIds,
                                rules: [
                                    { required: true, type: 'array', message: '请选择角色' },
                                ],
                            })(
                                <Select
                                    mode="multiple"
                                    style={{ width: '100%' }}
                                    onChange={handleChange}
                                    tokenSeparators={[',']}

                                >
                                    {
                                        roleList.length > 0 ? roleList.map((item) => {
                                            return (
                                                <Option key={item.value} disabled={!item.select}>{item.label}</Option>
                                            )
                                        }) : []
                                    }

                                </Select>)}

                            </FormItem>
                        </Col>
                        

                    </Row>
                    <Row>
                    <Col className="col" span={12} >
                            <FormItem
                                {...formItemLayout2}
                                label='账号有效期'>
                                {getFieldDecorator('date', {
                                    initialValue: detail.startTime ? [moment(detail.startTime), moment(detail.endTime)] : null,
                                    rules: [
                                        { required: false, type: 'array', whitespace: true, message: '请选择账号有效期' },
                                    ],
                                })(<RangePicker
                                    style={{ minWidth: 185, width: "100%" }}
                                    format="YYYY-MM-DD"
                                    locale={locale}
                                    showTime
                                    //                       disabled={actionType == 'detail'}
                                    onChange={(date, dateString) => dateChange(date, dateString)} />)}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </CollapsiblePanels>
        </div>

    )


}
export default connect(mapStateToProps)(Form.create()(routeView))

